<template>
	<view class="centerBox">
		<view class="flex justify-center" style="width: 100%;">
			<view>
				<image src="http://n298651t63.zicp.vip:9001/img/%E7%BE%8E%E5%9B%A2.png"
					style="width: 120rpx; height: 120rpx;border-radius: 120rpx;z-index: 1;left: 30rpx;" mode="aspectFit">
				</image>
				<image src="http://n298651t63.zicp.vip:9001/img/%E5%A4%A7%E4%BC%97%E7%82%B9%E8%AF%84.png"
					style="width: 120rpx; height: 120rpx;border-radius: 120rpx;left: -30rpx;"
					mode="aspectFit"></image>
			</view>
		</view>
		<view class="text-black text-bold margin-top-lg">
			美团、大众点评自助验券
		</view>
		<view class="flex align-center justify-center margin-top-lg">
			<input v-model="code" style="height: 80rpx;width: 360rpx;" placeholder="点击输入卡券兑换码" />
			<text class="cuIcon-scan text-gray" style="font-size: 40rpx;" @click="scanCode"></text>
		</view>
		<view class="centerLine"></view>
		<button class="cu-btn centerButton bg-tea margin-top-lg" @click="exchange">兑换</button>
	</view>
</template>

<script>
	export default {
		name: "exchangepackage",
		data() {
			return {
				code: '',
			};
		},
		methods: {
			scanCode() {
				//调起摄像头拍摄条形码
				let that = this;
				uni.scanCode({
					onlyFromCamera: false,
					scanType: ['barCode', 'qrCode'],
					success: function(res) {
						that.code = res.result;
					}
				})
			},
			//兑换券
			exchange() {
				uni.showLoading();
				uni.$u.http.post('/Customer/ExchangePackage', {
					code: this.code
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: res.msg
					})
				});
			},
		}
	}
</script>

<style scoped>
	.centerLine {
		background: #eee;
		width: 440rpx;
		height: 2rpx;
	}

	.centerButton {
		width: 440rpx;
	}

	.centerBox {
		margin-top: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
</style>
